CSS @charsetã®è¬ãè§£ãæãããŸããã¹ã¿ã€ã«ã·ãŒãã®æåãšã³ã³ãŒãã£ã³ã°ã«ãããéèŠãªåœ¹å²ãåŠã³ãäžçäžã®å€æ§ãªèšèªãæåã§ã®ã°ããŒãã«ãªããã¹ã衚瀺ãä¿èšŒããæååããé²ããŸãããã¹ãŠã®Webéçºè ã«ãšã£ãŠå¿ é ã§ãã
CSS @charset: ã°ããŒãã«ãªããã¹ãè¡šç€ºãæ¯ããèŠãããèšèšè
ãŠã§ãéçºã®è€éãªäžçã§ã¯ããããããã¯ã»ã«ãæåãç¡æ°ã®ããã€ã¹ãæååã§å®ç§ã«ã¬ã³ããªã³ã°ãããªããã°ãªãããäœããå£ãããŸã§æ°ã¥ãããªãã埮åŠã§ãããªãããæ¥µããŠéèŠãªè©³çްããã°ãã°ååšããŸãããã®äžã€ããå
ç¢ãªåœéçãŠã§ããã¬ãŒã³ã¹ã®åºç€ãšãªãæåãšã³ã³ãŒãã£ã³ã°ã§ããç¹ã«CSSã«ãããŠã¯ãããã¯@charsetã«ãŒã«ã«é¢ãã£ãŠããŸããäžèŠäºçްã«èŠãããããããŸãããã@charsetãçè§£ãæ£ããå®è£
ããããšã¯ãã¹ã¿ã€ã«ã·ãŒããã³ã³ãã³ããšåãèšèªã話ããäžçäžã®èŠèŽè
ã«ããã¹ããå®ç§ã«è¡šç€ºããããã«æãéèŠã§ãã
ãã®å
æ¬çãªã¬ã€ãã§ã¯ã@charsetã®éèŠæ§ãæ·±ãæãäžãããŠã§ãäžã®æåãšã³ã³ãŒãã£ã³ã°ãšããããåºãèŠéã®äžã§ãã®åœ¹å²ãæ¢ããŸãããªããããéèŠãªã®ããä»ã®ãšã³ã³ãŒãã£ã³ã°å®£èšãšã©ã®ããã«çžäºäœçšããã®ãããã®äœ¿çšã«é¢ãããã¹ããã©ã¯ãã£ã¹ããããŠé¿ããã¹ãäžè¬çãªèœãšã穎ããçã«ã°ããŒãã«ãªãŠã§ãäœéšãåµé ãããšãã芳ç¹ããè§£ãæãããŠãããŸãã
æåãšã³ã³ãŒãã£ã³ã°ã®çè§£ïŒãã®åºç€
@charsetãååã«çè§£ããããã«ã¯ããŸãæåãšã³ã³ãŒãã£ã³ã°ã®æŠå¿µãææ¡ããå¿
èŠããããŸãããã®æ žå¿ã«ãããŠãæåãšã³ã³ãŒãã£ã³ã°ãšã¯ãæåïŒã¢ã«ãã¡ããããæ°åãèšå·ãçµµæåãŸã§ãïŒã«äžæã®æ°å€ãå²ãåœãŠãã·ã¹ãã ã§ãããããããããžã¿ã«ã§ä¿åãéä¿¡ã衚瀺ããããšãå¯èœã«ããŸããäžè²«ãããšã³ã³ãŒãã£ã³ã°ããªããã°ããã€ãã®ã·ãŒã±ã³ã¹ã¯åãªãããŒã¿ã«éããŸãããããšã³ã³ãŒãã£ã³ã°ãããã°ããããã®ãã€ãã¯æå³ã®ããããã¹ãã«å€ãããŸãã
æåã»ããã®é²å
- ASCII (American Standard Code for Information Interchange): æãåæã§æãåºæ¬çãªãšã³ã³ãŒãã£ã³ã°æšæºãASCIIã¯128æåïŒ0-127ïŒããããã³ã°ããäž»ã«è±èªã®ã¢ã«ãã¡ããããæ°åãåºæ¬çãªå¥èªç¹ãã«ããŒããŠããŸãããã®ã·ã³ãã«ãã¯ç»æçã§ããããã³ã³ãã¥ãŒãã£ã³ã°ãäžççã«æ¡å€§ããã«ã€ããŠããã®éå®çãªç¯å²ã¯ããã«éå£ãšãªããŸããã
- ISO-8859-1 (Latin-1): ASCIIã®æ¡åŒµçã§ãããã«128æåïŒ128-255ïŒã远å ããŠãéãÃŒãçãªã©ã®çºé³åºå¥ç¬Šå·ïŒã¢ã¯ã»ã³ãããŠã ã©ãŠãïŒãæã€æåãå«ã西ãšãŒãããèšèªããµããŒãããŸãããããã¯å€§ããªäžæ©ã§ããããããªã«æåãã¢ã©ãã¢æåãæ±ã¢ãžã¢ã®æåãªã©ãå šãç°ãªãæåäœç³»ã䜿çšããèšèªã«ã¯ãŸã äžååã§ããã
- ãŠãããŒãµã«ãšã³ã³ãŒãã£ã³ã°ã®å¿ èŠæ§: ã€ã³ã¿ãŒããããäžççãªçŸè±¡ã«ãªãã«ã€ããŠãã·ã³ã°ã«ãã€ããšã³ã³ãŒãã£ã³ã°ã®éçã¯æçœã«ãªããŸãããè€æ°ã®èšèªã§ã³ã³ãã³ããæäŸãããŠã§ããµã€ããã倿§ãªèšèªã³ãã¥ããã£ã察象ãšãããŠã§ããµã€ãã¯ãä¹ãè¶ããããªã課é¡ã«çŽé¢ããŸããããã¹ãŠã®äººéã®èšèªã®ãã¹ãŠã®æåãããã«ã¯å€ãã®é人éçãªèšå·ãŸã§ã衚çŸã§ãããŠãããŒãµã«ãšã³ã³ãŒãã£ã³ã°ãå¿ èŠãšãããã®ã§ãã
UTF-8ïŒã°ããŒãã«ã¹ã¿ã³ããŒã
ããã§ç»å Žããã®ãUTF-8 (Unicode Transformation Format - 8-bit)ã§ãã仿¥ããŠã§ãã§æ¯é çãªæåãšã³ã³ãŒãã£ã³ã°ã§ãããããã«ã¯æ£åœãªçç±ããããŸããUTF-8ã¯ãUnicodeæšæºã®ããããæåã衚çŸã§ããå¯å€å¹ ãšã³ã³ãŒãã£ã³ã°ã§ããUnicodeã¯ãäžçäžã®ãã¹ãŠã®æžèšäœç³»ã®ãã¹ãŠã®æåãç¶²çŸ ããããšãç®æãå·šå€§ãªæåã»ããã§ããUTF-8ã®å¯å€å¹ ãšããæ§è³ªã¯ã次ã®ããšãæå³ããŸãïŒ
- äžè¬çãªASCIIæåã¯1ãã€ãã§è¡šçŸããããããåŸæ¹äºææ§ããããè±èªããã¹ãã«ãšã£ãŠå¹ççã§ãã
- ä»ã®æåäœç³»ïŒäŸïŒã®ãªã·ã£æåãããªã«æåãã¢ã©ãã¢æåãäžåœèªãæ¥æ¬èªãéåœèªããã³ãã£ãŒèªãã¿ã€èªïŒã®æåã¯ã2ã3ããŸãã¯4ãã€ãã§è¡šçŸãããŸãã
- 1ãã€ãæåã«ã¹ããŒã¹ãç¡é§ã«ããªããããæ··åæåã®ã³ã³ãã³ãã«å¯ŸããŠéåžžã«å¹ççã§ãã
- å埩åãé«ãããã©ãŠã¶ããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ãããã°ã©ãã³ã°èšèªã§åºããµããŒããããŠããŸãã
ãã¹ãŠã®æ°ãããŠã§ãã³ã³ãã³ãã«ã¯UTF-8ã䜿çšããããšãå§åçã«æšå¥šãããŸããããã«ããéçºãç°¡çŽ åãããæå€§éã®äºææ§ã確ä¿ãããã°ããŒãã«ãªãªãŒãã«ãšã£ãŠäžå¯æ¬ ã§ãã
CSSã®@charsetã«ãŒã«ïŒè©³çŽ°è§£èª¬
æåãšã³ã³ãŒãã£ã³ã°ãçè§£ããäžã§ã à€
à€¬ãCSSã®@charsetã«ãŒã«ã«çŠç¹ãåœãŠãããšãã§ããŸãããã®ã«ãŒã«ã¯ãã¹ã¿ã€ã«ã·ãŒãèªäœã®æåãšã³ã³ãŒãã£ã³ã°ãæå®ãããšãããå¯äžãã€éèŠãªç®çãæãããŸãã
æ§æãšé 眮
@charsetã®æ§æã¯åçŽã§ãïŒ
@charset "UTF-8";
ãŸãã¯ãå€ããããŸãæšå¥šãããªããšã³ã³ãŒãã£ã³ã°ã®å ŽåïŒ
@charset "ISO-8859-1";
ãã®é 眮ã«ã¯ã極ããŠéèŠãªã«ãŒã«ããããŸãïŒ
- ã¹ã¿ã€ã«ã·ãŒãã®ãŸãã«æåã®èŠçŽ ã§ãªããã°ãªããŸãããã³ã¡ã³ãã空çœïŒãªãã·ã§ã³ã®ãã€ããªãŒããŒããŒã¯ãé€ãïŒãä»ã®CSSã«ãŒã«ãã¢ããã«ãŒã«ããã®åã«ãã£ãŠã¯ãªããŸããã
- æåã®èŠçŽ ã§ãªãå ŽåãCSSããŒãµãŒã¯ãããåã«ç¡èŠãããšã³ã³ãŒãã£ã³ã°ã®åé¡ãåŒãèµ·ããå¯èœæ§ããããŸãã
- ããã宣èšãããŠããã¹ã¿ã€ã«ã·ãŒãã«ã®ã¿é©çšãããŸããè€æ°ã®CSSãã¡ã€ã«ãããå Žåãåãã¡ã€ã«ã®ãšã³ã³ãŒãã£ã³ã°ãããã©ã«ããŸãã¯æšæž¬ããããšã³ã³ãŒãã£ã³ã°ãšç°ãªãå¯èœæ§ãããå Žåã¯ãããããã«ç¬èªã®
@charsetã«ãŒã«ãå¿ èŠã§ãã
ãªãå¿ èŠãªã®ãïŒ
ããªãã®CSSãã¡ã€ã«ã«ãç¹å®ã®æåç¯å²ãæã€ã«ã¹ã¿ã ãã©ã³ããå«ãŸããŠããããç¹å¥ãªèšå·ãæã€contentããããã£ã䜿çšããŠãããããããã¯éASCIIæåãå«ãã¯ã©ã¹åãå®çŸ©ããŠãããããïŒã¯ã©ã¹åãšããŠã¯äžè¬çã«æšå¥šãããŸããããå¯èœã§ãïŒãšæ³åããŠã¿ãŠãã ããããã©ãŠã¶ãããªãã®CSSãã¡ã€ã«ã®ãã€ãããä¿åãããæ¹æ³ãšã¯ç°ãªããšã³ã³ãŒãã£ã³ã°ã§è§£éããå Žåããããã®æåã¯ãæååããïŒä¹±ãæå - æ¥æ¬èªã§ãjumbled charactersãïŒãšããŠç¥ããããæå³äžæãªããã¹ããšããŠè¡šç€ºãããŸãã
@charsetã«ãŒã«ã¯ããã©ãŠã¶ã«ããã®CSSãã¡ã€ã«ã¯ãã®ç¹å®ã®æåãšã³ã³ãŒãã£ã³ã°ã§æžãããŠããŸãããã®ãã€ããããã«åŸã£ãŠè§£éããŠãã ããããšæç€ºçã«äŒããŸãããã®æç€ºçãªå®£èšã¯ãç¹ã«ä»ã®ãšã³ã³ãŒãã£ã³ã°å®£èšã«ççŸãææ§ããããå Žåã«ã誀解ãé²ãã®ã«åœ¹ç«ã¡ãŸãã
ãšã³ã³ãŒãã£ã³ã°å®£èšã®åªå é äœ
@charsetã«ãŒã«ããã©ãŠã¶ãCSSãã¡ã€ã«ã®ãšã³ã³ãŒãã£ã³ã°ã決å®ããå¯äžã®æ¹æ³ã§ã¯ãªãããšãçè§£ããããšãéèŠã§ãããã©ãŠã¶ãåŸãç¹å®ã®åªå
é äœããããŸãïŒ
-
HTTP
Content-TypeããããŒïŒ ãããæãæš©åšããããæšå¥šãããæ¹æ³ã§ãããŠã§ããµãŒããŒãCSSãã¡ã€ã«ãé ä¿¡ããéãcharsetãã©ã¡ãŒã¿ä»ãã®HTTP Content-TypeããããŒãå«ããããšãã§ããŸããäŸïŒContent-Type: text/css; charset=UTF-8ããã®ããããŒãååšããå Žåããã©ãŠã¶ã¯ä»ã®äœããããããå°éããŸãããã®æ¹æ³ã¯ããµãŒããŒã«ãã£ãŠèšå®ããããã匷åã§ãããã©ãŠã¶ããã¡ã€ã«ã®å 容ãè§£æãå§ããåã§ãã£ãŠãäžè²«æ§ãä¿èšŒããŸããããã¯ãã°ãã°ãµãŒããŒã¬ãã«ïŒäŸïŒApacheãNginxïŒãŸãã¯ãµãŒããŒãµã€ãã¹ã¯ãªããïŒäŸïŒPHPãNode.jsïŒã§èšå®ãããŸãã
-
ãã€ããªãŒããŒããŒã¯ (BOM)ïŒ BOMã¯ããã¡ã€ã«ã®å
é ã«ããç¹å¥ãªãã€ãã·ãŒã±ã³ã¹ã§ããã®ãšã³ã³ãŒãã£ã³ã°ïŒç¹ã«UTF-8ãUTF-16ã®ãããªUTFãšã³ã³ãŒãã£ã³ã°ïŒã瀺ããŸããUTF-8ã®BOMã¯æè¡çã«ã¯ãªãã·ã§ã³ã§ãããæã
åé¡ïŒäŸïŒå€ããã©ãŠã¶/ãµãŒããŒã§ã®äœåãªç©ºçœïŒãåŒãèµ·ããããšããããŸããããã®ååšã¯ãã©ãŠã¶ã«ããã®ãã¡ã€ã«ã¯UTF-8ãšã³ã³ãŒããããŠããŸãããšäŒããŸããBOMãååšããå Žåãããã¯
@charsetã«ãŒã«ãããåªå ãããŸããUTF-8ã®å ŽåãBOMã·ãŒã±ã³ã¹ã¯
EF BB BFã§ããå€ãã®ããã¹ããšãã£ã¿ã¯ããUTF-8 with BOMããšããŠä¿åããéã«èªåçã«BOMã远å ããŸãããŠã§ãã³ã³ãã³ãã®å Žåãæœåšçãªã¬ã³ããªã³ã°ã®äžå ·åãããŒãµãŒã®åé¡ãé¿ããããã«ãUTF-8ãã¡ã€ã«ãBOMãªãã§ä¿åããããšãäžè¬çã«æšå¥šãããŸãã -
@charsetã«ãŒã«ïŒ HTTPContent-TypeããããŒãBOMãååšããªãå Žåããã©ãŠã¶ã¯CSSãã¡ã€ã«ã®æåã®ã¹ããŒãã¡ã³ããšããŠ@charsetã«ãŒã«ãæ¢ããŸããèŠã€ãã£ãå Žåããã®å®£èšããããšã³ã³ãŒãã£ã³ã°ã䜿çšããŸãã -
芪ããã¥ã¡ã³ãã®ãšã³ã³ãŒãã£ã³ã°ïŒ äžèšã®ããããæå®ãããŠããªãå Žåããã©ãŠã¶ã¯éåžžãCSSãã¡ã€ã«ã«ãªã³ã¯ããŠããHTMLããã¥ã¡ã³ãã®ãšã³ã³ãŒãã£ã³ã°ã«ãã©ãŒã«ããã¯ããŸããäŸãã°ãHTMLããã¥ã¡ã³ãã«
<meta charset="UTF-8">ããããCSSã«å¯ŸããŠä»ã®ãšã³ã³ãŒãã£ã³ã°ã®ãã³ãããªãå Žåããã©ãŠã¶ã¯CSSãUTF-8ã§ãããšä»®å®ããŸãã - ããã©ã«ããšã³ã³ãŒãã£ã³ã°ïŒ æåŸã®ææ®µãšããŠãã©ã®ãœãŒã¹ãããæç€ºçãªãšã³ã³ãŒãã£ã³ã°æ å ±ãåŸãããªãå Žåããã©ãŠã¶ã¯ããã©ã«ãã®ãšã³ã³ãŒãã£ã³ã°ãé©çšããŸãïŒããã¯ç°ãªããŸãããçŸä»£ã®ãã©ãŠã¶ã§ã¯ãã°ãã°UTF-8ãå€ããã©ãŠã¶ã§ã¯ãã±ãŒã«åºæã®ãšã³ã³ãŒãã£ã³ã°ã§ãïŒãããã¯æããªã¹ã¯ã®é«ãã·ããªãªã§ãããæååãã®æãäžè¬çãªåå ã§ããããã絶察ã«é¿ããã¹ãã§ãã
ãã®éå±€ã¯ãç¹ã«ãµãŒããŒãäžè²«ããŠUTF-8ããããŒãéä¿¡ããŠããããHTMLããã¥ã¡ã³ããUTF-8ã宣èšããŠããå Žåã«ãæç€ºçãª@charsetã«ãŒã«ããªããŠãCSSãã¡ã€ã«ãæ£ãã衚瀺ãããããšãããçç±ã説æããŠããŸãã
@charsetã䜿çšããå Žé¢ãšãã®çç±
ãã®åªå
é äœãèãããšã@charsetã¯åžžã«å¿
èŠãªã®ããšçåã«æããããããŸãããçãã¯åŸ®åŠã§ãããäžè¬çã«ã¯ãç¹ã«ç¹å®ã®ã·ããªãªã«ãããŠè¯ãç¿æ
£ã§ãïŒ
-
匷åãªãã©ãŒã«ããã¯ãšããŠïŒ ãµãŒããŒã
UTF-8ããããŒãéä¿¡ããããã«èšå®ãããŠããŠããCSSãã¡ã€ã«ã®å é ã«@charset "UTF-8";ãå«ããããšã¯ãæç€ºçãªå éšå®£èšãšããŠæ©èœããŸããããã¯ããµãŒããŒã®èšå®ãäžConsistentã§ããå¯èœæ§ã®ããéçºç°å¢ãããµãŒããŒãªãã§ãã¡ã€ã«ãããŒã«ã«ã§è¡šç€ºããå Žåã«ç¹ã«äŸ¿å©ã§ãã - äžè²«æ§ãšæç¢ºãã®ããã«ïŒ ããã«ãããéçºè ãã³ã³ãã³ã管çè ããŸãã¯ããŒã«ãªãŒãŒã·ã§ã³ã¹ãã·ã£ãªã¹ããªã©ããã¡ã€ã«ãéã誰ã«ãšã£ãŠãCSSãã¡ã€ã«ã®ãšã³ã³ãŒãã£ã³ã°ãæç¢ºã«ãªããŸãããã®æç¢ºãã¯ãç¹ã«åœéçãªããŒã éã§ã®å ±åäœæ¥äžã«ãææ§ããæœåšçãªãšã©ãŒãæžãããŸãã
-
ã¬ã¬ã·ãŒã·ã¹ãã ã®ç§»è¡ãŸãã¯ Ø§ÙØªØ¹Ø§Ù
ÙæïŒ ç°ãªããšã³ã³ãŒãã£ã³ã°ïŒäŸïŒISO-8859-1ãŸãã¯Windows-1252ïŒã§äœæãããå¯èœæ§ã®ããå€ãCSSãã¡ã€ã«ãæ±ã£ãŠããããããã®ãšã³ã³ãŒãã£ã³ã°ãäžæçã«ããŸãã¯ç§»è¡ãã§ãŒãºäžã«ä¿æããå¿
èŠãããå Žåã
@charsetã¯ãããã®ãã¡ã€ã«ãæ£ããè§£éããããã«äžå¯æ¬ ã«ãªããŸãã -
CSSã§éASCIIæåã䜿çšããå ŽåïŒ èªã¿ããããä¿å®æ§ã®èгç¹ããã¯äžè¬çã«æšå¥šãããŸããããCSSã§ã¯èå¥åïŒã¯ã©ã¹åããã©ã³ãåãªã©ïŒã«éASCIIæåãå«ããããšãããããããšã¹ã±ãŒããããŠãããããã¡ã€ã«ã®ãšã³ã³ãŒãã£ã³ã°ãæ£ããåŠçããå Žåã«å¯èœã§ããäŸãã°ããã©ã³ããã¡ããªãŒã
font-family: "Libre Baskerville Cyrillic";ãšå®çŸ©ããããcontentããããã£ã§ç¹å®ã®æåèšå·ã䜿çšãããããå ŽåïŒãŠãŒãèšå·ã®å Žåã¯content: '€';ããŸãã¯çŽæ¥content: 'â¬';ïŒãCSSãã¡ã€ã«ã®ãšã³ã³ãŒãã£ã³ã°ãæ£ãã宣èšãããŠããããšã確èªããããšãäžå¯æ¬ ã«ãªããŸãã@charset "UTF-8"; .currency-symbol::before { content: "â¬"; /* UTF-8ã®ãŠãŒãèšå· */ } .multilingual-text::after { content: "ìë íìžì"; /* éåœèªã®æå */ }æ£ãã
@charsetïŒãŸãã¯ä»ã®åŒ·åãªãšã³ã³ãŒãã£ã³ã°ã®ãã³ãïŒããªããã°ããããã®æåã¯çå笊ãä»ã®äžæ£ãªèšå·ãšããŠã¬ã³ããªã³ã°ãããå¯èœæ§ããããŸãã -
ç°ãªããã¡ã€ã³äžã®å€éšã¹ã¿ã€ã«ã·ãŒãïŒ äžè¬çãªã¢ã»ããã§ã¯ããŸãäžè¬çã§ã¯ãããŸããããå
šãç°ãªããã¡ã€ã³ã§ãã¹ããããŠããCSSãã¡ã€ã«ã«ãªã³ã¯ããŠããå Žåããããã®ãµãŒããŒèšå®ã¯å€§å¹
ã«ç°ãªãå¯èœæ§ããããŸããæç€ºçãª
@charsetã¯ãäºæãã¬ãšã³ã³ãŒãã£ã³ã°ã®äžäžèŽã«å¯Ÿãã远å ã®å ç¢æ§ãæäŸã§ããŸãã
èŠããã«ãUTF-8ã¯æ®éçã«æšå¥šããããšã³ã³ãŒãã£ã³ã°ã§ããããµãŒããŒããããŒã¯æãå
ç¢ãªã¡ã«ããºã ã§ããã@charset "UTF-8";ã¯ãã¹ã¿ã€ã«ã·ãŒãå
ã§ã®åªããå®å
šçããã³æå³ã®æç¢ºãªå®£èšãšããŠæ©èœããç§»æ€æ§ãé«ããã°ããŒãã«ãªèŠèŽè
ã«å¯Ÿãããšã³ã³ãŒãã£ã³ã°é¢é£ã®åé¡ã®å¯èœæ§ãäœæžããŸãã
ã°ããŒãã«ãªæåãšã³ã³ãŒãã£ã³ã°ã®ããã®ãã¹ããã©ã¯ãã£ã¹
ã·ãŒã ã¬ã¹ã§ã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªãŠã§ãäœéšãä¿èšŒããããã«ã¯ããã¹ãŠã®ãŠã§ãã¢ã»ããã§äžè²«ãããšã³ã³ãŒãã£ã³ã°æŠç¥ãéµå®ããããšãéèŠã§ããããã«ã@charsetããã®åœ¹å²ãæãããã¹ããã©ã¯ãã£ã¹ã瀺ããŸãïŒ
1. ãã¹ãŠã®å Žæã§UTF-8ã«æšæºåãã
ãããé»éåŸã§ãã以äžã®ãã®ã«å¯ŸããŠUTF-8ãããã©ã«ããã€æ®éçãªãšã³ã³ãŒãã£ã³ã°ã«ããŠãã ããïŒ
- ãã¹ãŠã®HTMLããã¥ã¡ã³ãïŒ HTMLã®
<head>ã»ã¯ã·ã§ã³å ã«<meta charset="UTF-8">ãæç€ºçã«å®£èšããŸããããã¯æåã®ã¡ã¿ã¿ã°ã®äžã€ã§ããã¹ãã§ãã - ãã¹ãŠã®CSSã¹ã¿ã€ã«ã·ãŒãïŒ ãã¹ãŠã®
.cssãã¡ã€ã«ãUTF-8ãšããŠä¿åããŸããããã«ããã¹ãŠã®CSSãã¡ã€ã«ã®æåã®è¡ãšããŠ@charset "UTF-8";ãå«ããŸãã - ãã¹ãŠã®JavaScriptãã¡ã€ã«ïŒ
.jsãã¡ã€ã«ãUTF-8ãšããŠä¿åããŸããJavaScriptã«ã¯@charsetã«çžåœãããã®ã¯ãããŸããããäžè²«æ§ãéµã§ãã - ãµãŒããŒèšå®ïŒ ãŠã§ããµãŒããŒïŒApacheãNginxãIISãªã©ïŒãããã¹ãŠã®ããã¹ãããŒã¹ã®ã³ã³ãã³ãã
Content-Type: text/html; charset=UTF-8ãŸãã¯Content-Type: text/css; charset=UTF-8ããããŒä»ãã§æäŸããããã«èšå®ããŸãããããæãå ç¢ã§æšå¥šãããæ¹æ³ã§ãã - ããŒã¿ããŒã¹ãšã³ã³ãŒãã£ã³ã°ïŒ ããŒã¿ããŒã¹ïŒäŸïŒMySQLãPostgreSQLïŒãUTF-8ïŒç¹ã«MySQLã§ã¯çµµæåãå«ããã¹ãŠã®Unicodeæåãå®å
šã«ãµããŒãããããã«
utf8mb4ïŒã䜿çšããããã«èšå®ãããŠããããšã確èªããŸãã - éçºç°å¢ïŒ ããã¹ããšãã£ã¿ãIDEãããŒãžã§ã³ç®¡çã·ã¹ãã ãããã©ã«ãã§UTF-8ã«èšå®ããŸããããã«ããã誀ã£ãŠç°ãªããšã³ã³ãŒãã£ã³ã°ã§ä¿åããã®ãé²ããŸãã
ã¹ã¿ãã¯å šäœã§äžè²«ããŠUTF-8ã䜿çšããããšã§ããšã³ã³ãŒãã£ã³ã°é¢é£ã®åé¡ã®å¯èœæ§ãåçã«æžãããäžçäžã®ãŠãŒã¶ãŒã«å¯ŸããŠãããããèšèªãããããæåã®ããã¹ããæå³ãããšããã«è¡šç€ºãããããšãä¿èšŒããŸãã
2. åžžã«ãã¡ã€ã«ãUTF-8ïŒBOMãªãïŒã§ä¿åãã
ã»ãšãã©ã®çŸä»£ã®ããã¹ããšãã£ã¿ïŒVS CodeãSublime TextãAtomãNotepad++ãªã©ïŒã§ã¯ãä¿åæã«ãšã³ã³ãŒãã£ã³ã°ãæå®ã§ããŸããåžžã«ãUTF-8ããŸãã¯ãUTF-8 without BOMããéžæããŠãã ãããåè¿°ã®éããBOMã¯ãšã³ã³ãŒãã£ã³ã°ã瀺ããŸãããæã 軜埮ãªè§£æåé¡ãèŠããªãæåãåŒãèµ·ããããšãããããããŠã§ãã³ã³ãã³ãã§ã¯äžè¬çã«é¿ããã®ãæåã§ãã
3. æ€èšŒãšãã¹ã
- ãã©ãŠã¶éçºè
ããŒã«ïŒ ãã©ãŠã¶ã®éçºè
ããŒã«ã䜿çšããŠãCSSãã¡ã€ã«ã®HTTPããããŒãæ€æ»ããŸãã
Content-TypeããããŒã«charset=UTF-8ãå«ãŸããŠããããšã確èªããŸãã - ã¯ãã¹ãã©ãŠã¶ããã³ã¯ãã¹ããã€ã¹ã§ã®ãã¹ãïŒ ããŸããŸãªãã©ãŠã¶ïŒChromeãFirefoxãSafariãEdgeïŒããã³ãªãã¬ãŒãã£ã³ã°ã·ã¹ãã ïŒã¢ãã€ã«ããã€ã¹ãå«ãïŒã§ãŠã§ããµã€ãããã¹ãããã¬ã³ããªã³ã°ã®äžäžèŽãæããŸãã
- åœéåãããã³ã³ãã³ãã®ãã¹ãïŒ ãµã€ããè€æ°ã®èšèªããµããŒãããŠããå Žåã¯ãç°ãªãæåäœç³»ïŒäŸïŒã¢ã©ãã¢èªããã·ã¢èªãäžåœèªãããŒãŽã¡ããŒã¬ãªãŒæåïŒã®ã³ã³ãã³ãã§ãã¹ããããã¹ãŠã®æåãæ£ããã¬ã³ããªã³ã°ãããããšã確èªããŸããç¹å®ã®çµµæåãªã©ãåºæ¬å€èšèªé¢ïŒBMPïŒå€ã«ããå¯èœæ§ã®ããæåã«ã¯ç¹ã«æ³šæãæã£ãŠãã ããããããã¯UTF-8ã§4ãã€ããå¿ èŠãšããŸãã
4. åœéæåã®ããã®ãã©ãŒã«ããã¯ãã©ã³ããæ€èšãã
æåãšã³ã³ãŒãã£ã³ã°ã¯ãã©ãŠã¶ããã€ããæ£ããè§£éããããšãä¿èšŒããŸããããããã®æåã衚瀺ã§ãããã©ããã¯ããŠãŒã¶ãŒã®ã·ã¹ãã ã«å¿
èŠãªã°ãªããå«ããã©ã³ãããããã©ããã«äŸåããŸããã«ã¹ã¿ã ãŠã§ããã©ã³ããç¹å®ã®æåããµããŒãããŠããªãå Žåããã©ãŠã¶ã¯ã·ã¹ãã ãã©ã³ãã«ãã©ãŒã«ããã¯ããŸãããã©ã³ãã¹ã¿ãã¯ãå
ç¢ã§ããããã©ã€ããªãŠã§ããã©ã³ãã«ååšããªãæåãåŠçããããã«ããžã§ããªãã¯ãã©ã³ããã¡ããªãŒïŒsans-serifãserifãªã©ïŒããã©ãŒã«ããã¯ãšããŠå«ãã§ããããšã確èªããŠãã ããã
ããããèœãšã穎ãšãã©ãã«ã·ã¥ãŒãã£ã³ã°
ãã¹ããã©ã¯ãã£ã¹ã«åŸã£ãŠããŠãããšã³ã³ãŒãã£ã³ã°ã®åé¡ã¯ææçºçããããšããããŸããããã§ã¯ã@charsetãšæåãšã³ã³ãŒãã£ã³ã°ã«é¢é£ããäžè¬çãªåé¡ãç¹å®ãã解決ããæ¹æ³ã玹ä»ããŸãïŒ
1. @charsetã®äžé©åãªé
眮
æãé »ç¹ãªãšã©ãŒã¯ã@charsetãæåã®è¡ä»¥å€ã®ã©ããã«é
眮ããããšã§ãããã®åã«ã³ã¡ã³ãã空è¡ããŸãã¯ä»ã®ã«ãŒã«ããããšãããã¯ç¡èŠãããŸãã
/* ç§ã®ã¹ã¿ã€ã«ã·ãŒã */
@charset "UTF-8"; /* ããã¯æ£ãã */
/* ç§ã®ã¹ã¿ã€ã«ã·ãŒã */
@charset "UTF-8"; /* äžæ£ïŒåã«ç©ºçœããã */
/* ç§ã®ã¹ã¿ã€ã«ã·ãŒã */
@import url("reset.css");
@charset "UTF-8"; /* äžæ£ïŒåã«@importããã */
解決çïŒ åžžã«@charsetãCSSãã¡ã€ã«ã®çµ¶å¯Ÿçãªæåã®å®£èšã§ããããšã確èªããŠãã ããã
2. ãã¡ã€ã«ãšã³ã³ãŒãã£ã³ã°ãšå®£èšããããšã³ã³ãŒãã£ã³ã°ã®äžäžèŽ
CSSãã¡ã€ã«ããäŸãã°ISO-8859-1ãšããŠä¿åãããŠããã®ã«ã@charset "UTF-8";ãšå®£èšããå ŽåãASCIIç¯å²å€ã®æåã¯æ£ããã¬ã³ããªã³ã°ãããªãå¯èœæ§ãé«ãã§ãããã¡ã€ã«ãUTF-8ã§ããã®ã«å€ããšã³ã³ãŒãã£ã³ã°ãšããŠå®£èšãããå Žåãåæ§ã§ãã
解決çïŒ åžžã«ãã¡ã€ã«ã宣èšãããšã³ã³ãŒãã£ã³ã°ïŒã§ããã°UTF-8ïŒã§ä¿åãããµãŒããŒããããŒãHTMLã¡ã¿ã¿ã°ãšã®äžè²«æ§ã確ä¿ããŠãã ãããå¿ èŠã§ããã°ãããã¹ããšãã£ã¿ã®ãååãä»ããŠä¿å...ããããšã³ã³ãŒãã£ã³ã°ã®å€æŽããªãã·ã§ã³ã䜿çšããŠãã¡ã€ã«ã倿ããŸãã
3. ãµãŒããŒèšå®ã@charsetãäžæžããã
ãµãŒããŒã@charsetã«ãŒã«ãšã¯ç°ãªããšã³ã³ãŒãã£ã³ã°ãæå®ããHTTP Content-TypeããããŒãéä¿¡ããå ŽåããµãŒããŒã®ããããŒãåªå
ãããŸããããã«ããã@charsetãæ£ãããŠãäºæãã¬æååããçºçããå¯èœæ§ããããŸãã
解決çïŒ ãŠã§ããµãŒããŒãããã¹ãŠã®CSSãã¡ã€ã«ã«å¯ŸããŠåžžã«Content-Type: text/css; charset=UTF-8ãéä¿¡ããããã«èšå®ããŠãã ããããããæãä¿¡é Œæ§ã®é«ãã¢ãããŒãã§ãã
4. UTF-8 BOMã®åé¡
çŸä»£ã®ããŒã«ã§ã¯ããŸãäžè¬çã§ã¯ãããŸããããäžèŠãªUTF-8 BOMããç¹ã«å€ããã©ãŠã¶ã®ããŒãžã§ã³ããµãŒããŒèšå®ã§ãè§£æã劚ããããšããããŸããããã«ããããã¡ã€ã«ã®å é ã«èŠããªãæåãã¬ã€ã¢ãŠãã®ãããçããããšããããŸãã
解決çïŒ ãã¹ãŠã®UTF-8ãã¡ã€ã«ãBOMãªãã§ä¿åããŠãã ãããå€ãã®ããã¹ããšãã£ã¿ããã®ãªãã·ã§ã³ãæäŸããŠããŸããåé¡ãçºçããå Žåã¯ã16é²ãšãã£ã¿ãé ãæåã衚瀺ã§ããå°éã®ããã¹ããšãã£ã¿ã䜿çšããŠBOMãååšãããã©ããã確èªããŠãã ããã
5. ã»ã¬ã¯ã¿/ã³ã³ãã³ãå ã®ç¹æ®æåã®ãšã¹ã±ãŒã
CSSèå¥åïŒã¯ã©ã¹åãªã©ãã°ããŒãã«ãªãããžã§ã¯ãã§ã¯éæšå¥šïŒãæååå€ïŒç䌌èŠçŽ ã®contentãªã©ïŒå
ã§éASCIIæåãçŽæ¥äœ¿çšããå¿
èŠãããå Žåã¯ãCSSãšã¹ã±ãŒãïŒ\ã«ç¶ããŠUnicodeã³ãŒããã€ã³ãïŒã䜿çšããããšãã§ããŸããäŸãã°ããŠãŒãèšå·ã®å Žåã¯content: "\20AC";ã§ãããã®ã¢ãããŒãã¯ããã¡ã€ã«ã®ãšã³ã³ãŒãã£ã³ã°ã«é¢ä¿ãªãäºææ§ãä¿èšŒããŸãããã¹ã¿ã€ã«ã·ãŒãã®äººéã«ããå¯èªæ§ãäœäžãããŸãã
.euro-icon::before {
content: "\20AC"; /* ãŠãŒãèšå·ã®Unicodeãšã¹ã±ãŒã */
}
.korean-text::after {
content: "\C548\B155\D558\C138\C694"; /* ãìë
íìžìãã®Unicodeãšã¹ã±ãŒã */
}
ãã¡ã€ã«ãæ£ããUTF-8ãšããŠä¿åãããŠããå Žåã@charset "UTF-8";ã䜿çšããŠæåãçŽæ¥åãèŸŒãæ¹ããèªã¿ãããã®ç¹ã§ã¯äžè¬çã«å¥œãŸããŸãããšã¹ã±ãŒãã¯ãç¹å®ã®ã·ããªãªã絶察çãªç¢ºå®æ§ãæ±ããããå Žåã®å
ç¢ãªä»£æ¿ææ®µã§ãã
æ£ãããšã³ã³ãŒãã£ã³ã°ãããããã°ããŒãã«ãªåœ±é¿
æåãšã³ã³ãŒãã£ã³ã°ãšããäžèŠæè¡çãªè©³çްãã²ããŠã¯@charsetã«ãŒã«ã¯ããŠã§ãã³ã³ãã³ãã®ã°ããŒãã«ãªãªãŒããšã¢ã¯ã»ã·ããªãã£ã«æ·±ã圱é¿ãäžããŸãïŒ
- äžçäžã§ã®ãæååããã®é²æ¢ïŒ æååãããããã¹ãã»ã©ãŠãŒã¶ãŒäœéšãæãªããã®ã¯ãããŸãããã¡ãã¥ãŒé ç®ãã¹ã¿ã€ã«èšå®ãããã³ã³ãã³ãã®äžéšããã¿ã³ã®ã©ãã«ã§ãããäžæ£ãªãšã³ã³ãŒãã£ã³ã°ã¯ããã¹ããå€èªäžèœã«ããç°ãªãèšèªã話ãããŸãã¯éã©ãã³æåã䜿çšãããŠãŒã¶ãŒãå³åº§ã«çå€ããŸããæ£ãããšã³ã³ãŒãã£ã³ã°ã確ä¿ããããšã§ãäžçäžã®ãŠãŒã¶ãŒã«å¯Ÿãããã®ãããã¹ãã®ç Žæããé²ããŸãã
- çã®åœéåïŒi18nïŒã®å®çŸïŒ ã°ããŒãã«ãªèŠèŽè ã«ãµãŒãã¹ãæäŸããããã«èšèšããããŠã§ããµã€ãã«ãšã£ãŠãå ç¢ãªåœéåã¯äº€æžã®äœå°ããããŸãããããã«ã¯ãè€æ°ã®èšèªãç°ãªãæ¥ä»/æå»åœ¢åŒãé貚èšå·ãããã¹ãã®æ¹åïŒå·Šããå³ãå³ããå·ŠïŒã®ãµããŒããå«ãŸããŸããé©åãªæåãšã³ã³ãŒãã£ã³ã°ã¯ãããããã¹ãŠã®åœéååªåãç¯ãããåºç€ã§ããããããªããã°ãæãæŽç·Žããã翻蚳ã·ã¹ãã ã§ããæ£ãã衚瀺ãããŸããã
- å°åãè¶ ãããã©ã³ãã®äžè²«æ§ã®ç¶æïŒ ãã©ã³ãã®èŠèŠçã¢ã€ãã³ãã£ãã£ã¯ããã®ããã¹ããã©ã®ããã«è¡šç€ºããããã«ãŸã§åã³ãŸãããã©ã³ãåãã¹ããŒã¬ã³ã«ãŠããŒã¯ãªæåãå«ãŸããŠããããéã©ãã³æåã§è¡šç€ºãããŠããå Žåãæ£ãããšã³ã³ãŒãã£ã³ã°ã¯ããŠãŒã¶ãŒã®å Žæãã·ã¹ãã èšå®ã«é¢ä¿ãªãããã©ã³ãã®ãã®éèŠãªåŽé¢ãäžè²«ããŠãããã§ãã·ã§ãã«ã«è¡šç€ºãããããšãä¿èšŒããŸãã
- ã°ããŒãã«æ€çŽ¢ã®ããã®SEOã®åäžïŒ æ€çŽ¢ãšã³ãžã³ã¯ãã³ã³ãã³ããã€ã³ããã¯ã¹ããããã«ãæ£ããè§£éãããããã¹ãã«å€§ããäŸåããŠããŸãããšã³ã³ãŒãã£ã³ã°ã®åé¡ã§æååãããŠããå Žåãæ€çŽ¢ãšã³ãžã³ã¯ã³ã³ãã³ããé©åã«çè§£ãåé¡ããã®ã«èŠåŽããã°ããŒãã«ãªæ€çŽ¢ãšã³ãžã³ã©ã³ãã³ã°ãçºèŠå¯èœæ§ãæãªãå¯èœæ§ããããŸãã
- ã¢ã¯ã»ã·ããªãã£ã®åäžïŒ æ¯æŽæè¡ïŒã¹ã¯ãªãŒã³ãªãŒããŒãæ¡å€§é¡ïŒã«äŸåãããŠãŒã¶ãŒã«ãšã£ãŠãæ£ããããã¹ãã¬ã³ããªã³ã°ã¯æãéèŠã§ããæååãããããã¹ãã¯ã人éã®ç®ã«ã¯èªããªãã ãã§ãªããã¢ã¯ã»ã·ããªãã£ããŒã«ã«ãšã£ãŠãèªãããã³ã³ãã³ããäžçã®ãŠãŒã¶ãŒããŒã¹ã®å€§éšåã«ãšã£ãŠã¢ã¯ã»ã¹äžèœã«ããŸãã
ã€ã³ã¿ãŒããããå°ççãªå¢çãè¶
ããäžçã§ã¯ãæåãšã³ã³ãŒãã£ã³ã°ãç¡èŠããããšã¯ãååšãã¹ãã§ãªãå Žæã«èšèªã®éå£ãç¯ãããšã«çããã§ããæ§ãããª@charsetã«ãŒã«ã¯ãé©åã«çè§£ããå®è£
ããããšãããããã®éå£ãæã¡ç Žããçã«ã°ããŒãã«ã§å
æ¬çãªã€ã³ã¿ãŒããããè²ãããšã«å€§ããè²¢ç®ããŸãã
çµè«ïŒå°ããªã«ãŒã«ããããã倧ããªåœ±é¿
CSSã®@charsetã«ãŒã«ã¯ããŠã§ãéçºã®åºå€§ãªé¢šæ¯ã®äžã§ã¯å°ããªãã£ããŒã«ã«èŠãããããããŸããããã¹ã¿ã€ã«ã·ãŒãã®ã°ããŒãã«ãªäºææ§ãšæ£ããã¬ã³ããªã³ã°ãä¿èšŒããäžã§ãäžé£ãåãã«å€§ããªåœ¹å²ãæãããŸããããã¯æåãšã³ã³ãŒãã£ã³ã°ã®ããºã«ã®åºæ¬çãªããŒã¹ã§ãããHTTPããããŒãBOMãHTMLã¡ã¿ã¿ã°ãšé£æºããŠããã€ãã®èšèªããã©ãŠã¶ã«äŒããŸãã
HTMLãCSSããJavaScriptããµãŒããŒèšå®ã«è³ããŸã§ããã¹ãŠã®ãŠã§ãã¢ã»ããã§UTF-8ãæ®éçãªãšã³ã³ãŒãã£ã³ã°æšæºãšããŠæ¡çšããã¹ã¿ã€ã«ã·ãŒãã®åé ã«äžè²«ããŠ@charset "UTF-8";ãé©çšããããšã§ãçã«åœéçãªãŠã§ããã¬ãŒã³ã¹ã®ããã®å
ç¢ãªåºç€ãç¯ããŠããããšã«ãªããŸãããã®çްéšãžã®äž¹å¿µãªæ³šæã¯ãã€ã©ã€ã©ãããæååãããé²ããããªãã®ã³ã³ãã³ãããã¶ã€ã³ããã©ã³ãã¢ã€ãã³ãã£ãã£ããæ¯åœèªãæåã«é¢ä¿ãªããäžçäžã®ãã¹ãŠã®ãŠãŒã¶ãŒã«å®ç§ã«æç€ºãããããšãä¿èšŒããŸãã
ãŠã§ãã®ããã«æ§ç¯ãç¶ããäžã§ããã¹ãŠã®æåãéèŠã§ããããšãå¿ããªãã§ãã ãããCSSå
ã®æ§ãããª@charsetã«ãŒã«ã«å
å°ããããäžè²«æ§ã®ããæç¢ºãªæåãšã³ã³ãŒãã£ã³ã°æŠç¥ã¯ãåãªãæè¡çãªåœ¢åŒã§ã¯ãªããçã«ã°ããŒãã«ã§ãã¢ã¯ã»ã¹ããããããŠãŒã¶ãŒãã¬ã³ããªãŒãªã€ã³ã¿ãŒããããžã®ã³ãããã¡ã³ããªã®ã§ãã